<template>
    <el-card>
        <div ref="chart" class="chartStyle" style=""></div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import eventBus from '/eventBus';

const chart = ref(null);

const props = defineProps({
    multi_chart_data_ForProps: {
        type: Object,
        // default: () => []
    }
})

// 监听数据变化
// watch(() => eventBus.state.averageScores, (newScores) => {
//     convertType(newScores);
//     nextTick(() => {
//         initChart();
//     });
// }, { deep: true });

// 数据转换
// const convertType = (scores) => {
//     xAxisData.value = [];
//     optionData.value = [];
//     for (const score of scores) {
//         xAxisData.value.push(score.question);
//         optionData.value.push(score.avg);
//     }
// }
var app = {};
var option;
let keys = Object.keys(props.multi_chart_data_ForProps);

// 初始化图表
const initChart = () => {
    const myChart = echarts.init(chart.value);
    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
    };
    // const seriesData = Object.keys(props.multi_chart_data_ForProps).map(key => {
    //     const obj = {
    //         name: key,
    //         type: 'bar',
    //         label: labelOption,
    //         emphasis: {
    //             focus: 'series'
    //         },
    //         data: Object.values(props.multi_chart_data_ForProps[key]).filter(value => typeof value === 'number')
    //     };
    //     return obj;
    // });
    const seriesData = Object.keys(props.multi_chart_data_ForProps["课程目标1"]).map(type => {
        const obj = {
            name: type,
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: Object.keys(props.multi_chart_data_ForProps).map(key => props.multi_chart_data_ForProps[key][type])
        };
        return obj;
    });
    // console.log("seriesData", seriesData);
    option = {
            title: {
            text: '课程目标中各题型分数',
            top: 10,
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: keys
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true},
                dataView: { show: true, readOnly: false , title: '数据视图' },
                magicType: {
                    show: true, type: ['line', 'bar', 'stack'], title: {
                        line: '切换为折线图',
                        bar: '切换为柱状图',
                        stack:'切换为堆叠图'
                    }
                },
                restore: { show: true, title: '还原' },
                saveAsImage: { show: true, title: '保存' }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: keys
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: seriesData
    };

    myChart.setOption(option);
};

onMounted(() => {
    nextTick(() => {
        // console.log("multi_chart_data_ForProps", props.multi_chart_data_ForProps);
        initChart();
    });
});
// onMounted(() => {
//     // 初始化或重置图表
//     if (eventBus.state.averageScores.length) {
//         convertType(eventBus.state.averageScores);
//         nextTick(() => {
//             initChart();
//         });
//     }
// });
</script>

<style lang="scss" scoped>
.chartStyle{
    min-width: 500px;
    // width: 100vw;
    height: 400px;
}
</style>